<template>
    <PageView>
        <a-card title="列表">
            <a-button type="primary" slot="extra" @click="()=>{form.resetFields();isShowJf = true}">新增管理员</a-button>
            <a-row :gutter="10" class="inputGroup">
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-input v-model="searchData.username" placeholder="请输入账号" @keyup.enter="getListTwo"/>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-select allowClear v-model="searchData.status" style="width:100%" placeholder="请选择状态"
                              @change="getListTwo">
                        <a-select-option value="1">正常</a-select-option>
                        <a-select-option value="-1">冻结</a-select-option>
                    </a-select>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-button-group>
                        <a-button type="primary" :loading="loading" @click="getListTwo">确定筛选</a-button>
                    </a-button-group>
                </a-col>
            </a-row>
            <a-table
                :loading="loading"
                :columns="columns"
                :dataSource="data"
                :pagination="{total,pageSize,showSizeChanger,current}"
                @change="changePagination"
                bordered :scroll="{x:true}">
            </a-table>
        </a-card>
        <!--新增管理员-->
        <a-modal
            title="新增管理员"
            :visible="isShowJf"
            @ok="addAdmin"
            :confirmLoading="confirmLoading"
            centered
            :closable="false"
            @cancel="isShowJf = false"
            :maskClosable="false"
            width="380px"
        >
            <a-form :form="form" style="margin-top: 20px">
                <a-form-item label="用户名" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-input v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]" placeholder="请输入用户名"/>
                </a-form-item>
                <a-form-item label="密码" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-input v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]" placeholder="请输入密码"/>
                </a-form-item>
                <a-form-item label="确认密码" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-input v-decorator="['password_t', { rules: [{ required: true, message: '请再次输入密码' }] }]" placeholder="请再次输入密码"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </PageView>
</template>

<script type="text/jsx">
    import Auth from '../../api/Auth'

    export default {
        name: 'admin',
        data () {
            return {
                loading: true,
                columns: [
                    {
                        title: '管理员ID',
                        dataIndex: 'id',
                        customRender: (v) => <a>{v}</a>
                    },
                    {
                        title: '管理员账号',
                        dataIndex: 'username',
                        customRender:(v,r)=>{
                            return r.isEdit?(
                                <a-input placeholder="请输入管理员账号" defaultValue={v.value} onChange={(e)=>{v.value = e.target.value}}/>
                            ):(
                                v.value
                            )
                        }
                    },
                    {
                        title: '密码',
                        dataIndex: 'pwd',
                        customRender:(v,r)=>{
                            return r.isEdit?(
                                <a-input placeholder="管理员密码(不填写则不修改)" defaultValue={v} onChange={(e)=>{r.pwd = e.target.value}}/>
                            ):(
                                "******"
                            )
                        }
                    },
                    {
                        title: '状态',
                        dataIndex: 'status',
                        customRender:(v,r)=>{
                            return r.isEdit?(
                                <a-select defaultValue={v.value} style="width:100%" placeholder="请选择状态" onChange={(e)=>{v.value = e;}}>
                                    <a-select-option value="1">正常</a-select-option>
                                    <a-select-option value="-1">冻结</a-select-option>
                                </a-select>
                            ):(
                                v.value===`1`?`正常`:`冻结`
                            )
                        }
                    },
                    {
                        title: '用户组',
                        dataIndex: 'wocao',
                        customRender:(v)=><div>
                            {v.title?v.title:(<a-badge status="error" text="暂未分组"/>)}
                        </div>
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 110,
                        customRender: (v) => {
                            return (
                                <a-button-group>
                                    <a-button
                                        type="primary"
                                        onClick={()=>{
                                            this.changeGroup(v.id,v.wocao.value)
                                        }}>
                                        用户组
                                    </a-button>
                                    <a-button
                                        type={v.isEdit?`danger`:`primary`}
                                        onClick={()=>{
                                            v.isEdit?this.changeConfig(v):v.isEdit = true
                                        }}>
                                        {v.isEdit?`确定`:`编辑`}
                                    </a-button>
                                    {v.isEdit?(
                                        <a-button type="danger" onClick={()=>{v.isEdit = false}}>取消编辑</a-button>
                                    ):""}

                                </a-button-group>
                            )
                        }
                    }
                ],
                data: [],
                total: 0,
                pageSize: 10,
                current: 1,
                showSizeChanger: true,
                searchData: {
                    username: '',
                    status: undefined,
                },
                levelArray:[],
                form: this.$form.createForm(this),
                confirmLoading:false,
                isShowJf:false,
                labelCol:{
                    xs:{span:24},
                    sm:{span:6},
                },
                wrapperCol:{
                    xs:{span:24},
                    sm:{span:18},
                }
            }
        },
        activated () {
            this.getList()
        },
        methods: {
            getListTwo () {
                this.current = 1
                this.getList()
            },
            getList () {
                this.loading = true
                Auth.getAllAdmin({
                    page: this.current,
                    num: this.pageSize,
                    ...this.searchData
                }).then(res => {
                    this.data = res.data.map((value, key) => {
                        return { ...value, key, isEdit:false,pwd:""}
                    })
                    this.levelArray = res.group
                    this.loading = false
                    this.total = parseInt(res.count)
                })
            },
            changePagination (pagination) {
                Object.keys(pagination).forEach(val => {
                    this[val] = pagination[val]
                })
                this.getList()
            },
            changeConfig(v){
                this.$confirm({
                    title: `修改`,
                    content: `确定要修改此管理员吗?`,
                    centered: true,
                    onOk: () => {
                        let config = {id:v.id,username:v.username.value,status:v.status.value,pwd:v.pwd}
                        return new Promise((resolve, reject) => {
                            Auth.changeInfo(config).then(res => {
                                resolve()
                                this.getList()
                            }).catch(res => {
                                reject()
                            })
                        })
                    }
                })
            },
            changeGroup(id,value){
                let group_id = value||undefined
                this.$confirm({
                    title: `修改用户组`,
                    width:350,
                    content: (
                        <a-select placeholder="请选择用户组" style="width:100%;margin:20px 0px 10px 0px;padding-right:38px" defaultValue={group_id} placeholder="请选用户组" onChange={(e)=>{group_id = e;}}>
                            {this.levelArray.map(v=>{
                                return (<a-select-option value={v.id}>{v.title}</a-select-option>)
                            })}
                        </a-select>
                    ),
                    centered: true,
                    onOk: () => {
                        return new Promise((resolve, reject) => {
                            Auth.changeJuese({id,group_id}).then(res => {
                                resolve()
                                this.getList()
                            }).catch(res => {
                                reject()
                            })
                        })
                    }
                })
            },
            addAdmin(){
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.confirmLoading = false
                        Auth.addAdminMember(values).then(res => {
                            this.isShowJf = false
                            this.confirmLoading = false
                            this.getList()
                        }).catch(res=>{
                            this.confirmLoading = false
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .inputGroup {
        > div {
            margin-bottom: 20px;
        }
    }
</style>